<template>
  <div class="w-full h-full overflow-y-auto">
    <PageHeader :title="t('apply.base_info.店铺信息')" />
    <div class="pl20 pr20 mt32">
      <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        label-width="300px"
      >
        <div class="titleRow">{{ t('apply.base_info.入驻类型') }}</div>
        <el-form-item :label="t('apply.base_info.入驻类型')">
          <el-radio-group v-model="formData.settleType" @change="handleTypeChange">
            <el-radio :label="1" :value="1">{{ t('apply.base_info.个人入驻') }}</el-radio>
            <el-radio :label="2" :value="2">{{ t('apply.base_info.企业入驻') }}</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 个人入驻表单 -->
        <template v-if="formData.settleType === 1">
          <div class="titleRow">{{ t('apply.base_info.店铺联系人信息') }}</div>
          <div class="form-grid">
            <el-form-item :label="t('apply.base_info.所在地')" prop="settleLocation">
              <el-input
                v-model="formData.settleLocation"
                :placeholder="t('apply.base_info.请输入所在地')"
              />
            </el-form-item>
            <el-form-item :label="t('apply.base_info.详细地址')" prop="settleAddress">
              <el-input
                v-model="formData.settleAddress"
                :placeholder="t('apply.base_info.请输入详细地址')"
              />
            </el-form-item>
            <el-form-item :label="t('apply.base_info.联系人')" prop="settleContact">
              <el-input
                v-model="formData.settleContact"
                :placeholder="t('apply.base_info.请输入联系人姓名')"
              />
            </el-form-item>
            <el-form-item :label="t('apply.base_info.联系手机号')" prop="settlePhone">
              <el-input
                v-model="formData.settlePhone"
                :placeholder="t('apply.base_info.请输入联系手机号')"
              />
            </el-form-item>
          </div>

          <div class="titleRow">{{ t('apply.base_info.身份证信息') }}</div>
          <el-form-item :label="t('apply.base_info.身份证正面')" prop="settleIdImage1">
            <UploadFile
              v-model="formData.settleIdImage1"
              :limit="1"
              :file-size="2"
              :tip="t('apply.base_info.请上传身份证人像面')"
              single-mode
            />
          </el-form-item>
          <el-form-item :label="t('apply.base_info.身份证反面')" prop="settleIdImage2">
            <UploadFile
              v-model="formData.settleIdImage2"
              :limit="1"
              :file-size="2"
              :tip="t('apply.base_info.请上传身份证国徽面')"
              single-mode
            />
          </el-form-item>
        </template>

        <!-- 企业入驻表单 -->
        <template v-else-if="formData.settleType === 2">
          <div class="titleRow">{{ t('apply.base_info.店铺联系人信息') }}</div>
          <div class="form-grid">
            <el-form-item :label="t('apply.base_info.公司名称')" prop="settleCompanyName">
              <el-input
                v-model="formData.settleCompanyName"
                :placeholder="t('apply.base_info.请输入公司名称')"
              />
            </el-form-item>
            <el-form-item :label="t('apply.base_info.所在地')" prop="settleLocation">
              <el-input
                v-model="formData.settleLocation"
                :placeholder="t('apply.base_info.请输入所在地')"
              />
            </el-form-item>
            <el-form-item :label="t('apply.base_info.详细地址')" prop="settleAddress">
              <el-input
                v-model="formData.settleAddress"
                :placeholder="t('apply.base_info.请输入详细地址')"
              />
            </el-form-item>
            <el-form-item :label="t('apply.base_info.联系人')" prop="settleContact">
              <el-input
                v-model="formData.settleContact"
                :placeholder="t('apply.base_info.请输入联系人姓名')"
              />
            </el-form-item>
            <el-form-item :label="t('apply.base_info.联系手机号')" prop="settlePhone">
              <el-input
                v-model="formData.settlePhone"
                :placeholder="t('apply.base_info.请输入联系手机号')"
              />
            </el-form-item>
          </div>

          <div class="titleRow">{{ t('apply.base_info.营业执照信息') }}</div>
          <el-form-item :label="t('apply.base_info.营业执照')" prop="settleLicenseImage">
            <UploadFile
              v-model="formData.settleLicenseImage"
              :limit="1"
              :file-size="2"
              :tip="t('apply.base_info.请上传营业执照')"
              single-mode
            />
          </el-form-item>

          <div class="titleRow">{{ t('apply.base_info.法人身份信息') }}</div>
          <el-form-item :label="t('apply.base_info.身份证正面')" prop="settleIdImage1">
            <UploadFile
              v-model="formData.settleIdImage1"
              :limit="1"
              :file-size="2"
              :tip="t('apply.base_info.请上传身份证人像面')"
              single-mode
            />
          </el-form-item>
          <el-form-item :label="t('apply.base_info.身份证反面')" prop="settleIdImage2">
            <UploadFile
              v-model="formData.settleIdImage2"
              :limit="1"
              :file-size="2"
              :tip="t('apply.base_info.请上传身份证国徽面')"
              single-mode
            />
          </el-form-item>

          <div class="titleRow">{{ t('apply.base_info.补充认证信息') }}</div>
          <div class="form-grid">
            <el-form-item :label="t('apply.base_info.补充认证一')" prop="settleExtra1">
              <UploadFile
                v-model="formData.settleExtra1"
                :limit="1"
                :file-size="2"
                :tip="t('apply.base_info.请上传补充认证资料')"
                single-mode
              />
            </el-form-item>
            <el-form-item :label="t('apply.base_info.补充认证二')" prop="settleExtra2">
              <UploadFile
                v-model="formData.settleExtra2"
                :limit="1"
                :file-size="2"
                :tip="t('apply.base_info.请上传补充认证资料')"
                single-mode
              />
            </el-form-item>
            <el-form-item :label="t('apply.base_info.补充认证三')" prop="settleExtra3">
              <UploadFile
                v-model="formData.settleExtra3"
                :limit="1"
                :file-size="2"
                :tip="t('apply.base_info.请上传补充认证资料')"
                single-mode
              />
            </el-form-item>
          </div>
        </template>

        <div class="flex_aic_jcc mt32">
          <el-button size="large" @click="handBack"
            >{{ t('apply.business_info.上一步') }}</el-button
          >
          <el-button type="primary" size="large" @click="submitForm"
            >{{ t('apply.base_info.下一步') }}</el-button
          >
          <!-- <el-button @click="resetForm">{{ t('apply.base_info.重置') }}</el-button> -->
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
import { formData } from "../data";
import UploadFile from "@/components/UploadFile.vue";

const router = useRouter();
const { t } = useI18n();
const formRef = ref(null);

// 验证手机号的方法
const validatePhone = (rule, value, callback) => {
  const phoneRegex = /^1[3-9]\d{9}$/;
  if (!value) {
    callback(new Error(t('apply.base_info.请输入手机号码')));
  } else if (!phoneRegex.test(value)) {
    callback(new Error(t('apply.base_info.请输入正确的手机号码')));
  } else {
    callback();
  }
};

// 验证上传图片的方法
const validateUpload = (rule, value, callback) => {
  if (!value || !value?.length) {
    callback(new Error(t('apply.base_info.请上传图片')));
  } else {
    callback();
  }
};

// 表单验证规则
const rules = reactive({
  // 通用字段规则
  settleLocation: [{ required: true, message: t('apply.base_info.请输入所在地'), trigger: "blur" }],
  settleAddress: [{ required: true, message: t('apply.base_info.请输入详细地址'), trigger: "blur" }],
  settleContact: [
    { required: true, message: t('apply.base_info.请输入联系人姓名'), trigger: "blur" },
  ],
  settlePhone: [{ required: true, validator: validatePhone, trigger: "blur" }],

  // 个人和企业共有字段
  settleIdImage1: [
    { required: true, validator: validateUpload, trigger: "change" },
  ],
  settleIdImage2: [
    { required: true, validator: validateUpload, trigger: "change" },
  ],

  // 企业入驻特有字段
  settleCompanyName: [{ required: true, message: t('apply.base_info.请输入公司名称'), trigger: "blur" }],
  settleLicenseImage: [
    { required: true, validator: validateUpload, trigger: "change" },
  ],
  settleExtra1: [
    // { required: false, validator: validateUpload, trigger: "change" },
  ],
  settleExtra2: [
    // { required: false, validator: validateUpload, trigger: "change" },
  ],
  settleExtra3: [
    // { required: false, validator: validateUpload, trigger: "change" },
  ],
});

const handleTypeChange = (type) => {
  console.log("入驻类型变更:", type);
};

// 提交表单
const submitForm = async () => {
  if (!formRef.value) return;
  await formRef.value.validate((valid, fields) => {
    if (valid) {
      router.push("/apply/business_info");
    } else {
      console.log("表单验证失败:", fields);
      ElMessage.error(t('apply.base_info.请完成必填信息'));
    }
  });
};

// 重置表单
const resetForm = () => {
  if (!formRef.value) return;

  formRef.value.resetFields();
  ElMessage.info(t('apply.base_info.表单已重置'));
};

const handBack = ()=>{
  router.push("/apply/settled_protocol")
}
</script>

<style scoped lang="scss">
.titleRow {
  height: 36px;
  line-height: 36px;
  background: rgba(24, 144 ,255, 0.05);
  border-radius: 3px;
  padding-left: 10px;
  margin-bottom: 24px;
  font-weight: 500;
  color: #333;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.form-actions {
  margin-top: 40px;
  text-align: center;
}

// 确保上传组件在网格中正确显示
:deep(.el-form-item) {
  margin-bottom: 22px;
}

:deep(.el-form-item__label) {
  font-weight: 500;
}

:deep(.el-form-item.is-error .el-input__wrapper) {
  box-shadow: 0 0 0 1px #f56c6c inset;
}

:deep(.el-cascader) {
  width: 100%;
}
</style>
